.component-loading{
	padding: (30rem/$num);
	background-color: rgba(51,51,51,.9);
	position: fixed;
	top: 40%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	border-radius: (10rem/$num);
	z-index: 99;
	.loadings{
		width: (64rem/$num);
		height: (64rem/$num);
		-webkit-box-sizing:border-box;
		position: relative;
		.loading-list{
			width: (16rem/$num);
			height: (16rem/$num);
			position: absolute;
			margin-left: (-8rem/$num);
			margin-top: (-8rem/$num);
			border-radius: 100%;
			-webkit-animation: loading 1s infinite ease-in-out;
			background-color: rgba(255,255,255,.8);
			&:nth-child(1){
				top: 5%;
				left: 50%;
				-webkit-animation-delay: -.875s;
			}
			&:nth-child(2){
				top: 18.1801948466%;
				left: 81.8198051534%;
				-webkit-animation-delay: -.75s;
			}
			&:nth-child(3){
				top: 50%;
				left: 95%;
				-webkit-animation-delay: -.625s;
			}
			&:nth-child(4){
				top: 81.8198051534%;
				left: 81.8198051534%;
				-webkit-animation-delay: -.5s;
			}
			&:nth-child(5){
				top: 94.9999999966%;
				left: 50.0000000005%;
				-webkit-animation-delay: -.375s;
			}
			&:nth-child(6){
				top: 81.8198046966%;
				left: 18.1801949248%;
				-webkit-animation-delay: -.25s;
			}
			&:nth-child(7){
				top: 49.9999750815%;
				left: 5.0000051215%;
				-webkit-animation-delay: -.125s;
			}
			&:nth-child(8){
				top: 18.179464974%;
				left: 18.1803700518%;
				-webkit-animation-delay: 0s;
			}
		}
	}

}

@-webkit-keyframes loading {
	0%,100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	20% {
		opacity: 1
	}

	80% {
		opacity: 0;
		-webkit-transform: scale(0);
		transform: scale(0)
	}
}
